<template>
  <div>
<!--    <van-nav-bar title="我的信息" />-->
    <div class="top-pane">
      <div class="base-info">
        <van-image
          width="60"
          height="60"
          round
          :src="user.avatar"
        />
        <div class="user">
          <div class="name"><van-icon name="contact" color="#208eee" />：{{user.name}}</div>
          <div class="phone"><van-icon name="more-o" color="#00aa00" />：{{user.username}}</div>
        </div>
        <div class="arrow">
          <van-icon name="replay" size="14" color="#00cc00" @click="getUserInfo"><span style="color: #00cc00">更新</span></van-icon>
        </div>
      </div>
      <ul class="base-btns">
          <li>
            <div class="value">¥ {{user.balance}}</div>
            <div class="label">余额</div>
          </li>
          <li>
            <div class="value">¥ {{user.give}}</div>
            <div class="label">赠送</div>
          </li>
          <li>
            <van-button size="small" type="primary" to="/recharge"> 去充值 </van-button>
          </li>
      </ul>
    </div>
    <van-grid class="grid-box" clickable direction="horizontal" :column-num="2">
      <van-grid-item icon="balance-list" to="/recharge/record" text="充值记录" style="color:#00aa00"/>
      <van-grid-item icon="todo-list" to="/charge/record" text="充电记录" style="color: #208eee" />
    </van-grid>

    <van-grid class="grid-box2" :column-num="4" clickable>
      <van-grid-item icon="cash-back-record" @click="goRefund" text="退款申请" style="padding: 5px; color: #f5d81f" />
      <van-grid-item icon="home-o" to="/commonly" text="常用电站" style="padding: 5px; color: #cf10fa" />
      <van-grid-item icon="guide-o" text="使用说明" @click="showHelpMessage" style="padding: 5px; color: #7a33ec" />
      <van-grid-item icon="phone-circle-o" text="联系我们" @click="showContactMessage" style="padding: 5px; color: #e31717" />
    </van-grid>

    <van-cell-group inset>
<!--      <van-cell icon="card" title="电卡管理" to="/card" is-link />-->
<!--      <van-cell icon="manager" style="color: #1989fa" title="站长后台" to="/admin" is-link v-if="!isCommonUser" />-->
<!--      <van-cell title="合伙人后台" to="/partner" is-link v-if="!isSplitUser"/>-->
<!--      <van-cell title="站长加盟" is-link @click="showContactMessage" v-else />-->
      <van-cell @click="showChargingList" title="充电中" icon="underway-o" style="color: #f60" v-if="user.chargingStatus === 1" is-link/>
    </van-cell-group>
    <!-- 扫码信息 -->
    <van-popup
      v-model="subscribeShow"
      closeable
      position="bottom"
      title="长按关注公众号"
      :style="{ height: '100%' }">
      <van-image width="100%" height="100%" :src="publicInfo" />
    </van-popup>

    <!-- 使用说明 -->
    <van-popup
      v-model="helpShow"
      closeable
      position="bottom"
      :style="{ height: '100%' }">
      <div class="help-image" >
        <img :src="helpImgSrc" alt="">
      </div>
      <div class="help-close">
        <van-button type="primary" @click="helpShow = false" style="width: 100%">关闭</van-button>
      </div>
    </van-popup>
    <van-popup v-model="show" title="充电中" position="bottom">
      <van-cell-group  v-for="(charging, i) in chargingList" :key="i" :title="'开始充电：' + charging.createTime">
        <van-cell icon="underway-o" style="color: #f60" :title="charging.equipNo +'-'+charging.channelNo" :value="charging.amount"
                  @click="goChargingPage(charging.equipId, charging.channelNo)" is-link />
      </van-cell-group>
    </van-popup>
    <div style="height:50px"></div>
  </div>
</template>

<script>
import Utils from '../utils'

export default {
  name: 'UserInfo',
  data () {
    return {
      show: false,
      chargingList: [],
      subscribeShow: false,
      helpShow: false,
      helpImgSrc: '',
      publicInfo: '',
      publicName: ''
    }
  },
  computed: {
    user () {
      return this.$store.state.user || {}
    }
  },
  created () {
    const homeTimes = sessionStorage.getItem('homeTimes')
    if (homeTimes) {
      sessionStorage.setItem('homeTimes', parseInt(homeTimes) + 1)
    } else {
      sessionStorage.setItem('homeTimes', 1)
      this.$http.get('/getUserSubAndBalance').then(res => {
        if (res.code === 200) {
          if (res.data.subscribe !== '1') {
            this.showSubscribe()
            this.publicInfo = res.data.publicInfo
            this.publicName = res.data.publicName
          }
          if (res.data.balance < 0) {
            this.showRecharge()
          }
        }
      })
    }
  },
  mounted () {
    if (this.user.username == null || this.user.username === '' || this.user.username === undefined) {
      this.$store.dispatch('updateUserInfo')
    }
    // 从地址栏获取code
    const code = Utils.getQueryString('code')
    if (code) {
      this.$http.get('/getWeUserSubInfo?code=' + code).then(res => {
        if (res.code === 200) {
          this.$store.dispatch('updateUserInfo')
          window.location.href = Utils.host
        } else {
          this.$toast(res.msg)
        }
      })
    }
  },
  methods: {
    getUserInfo () {
      if (Utils.isWeApp()) {
        console.log()
        window.location.replace('https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + Utils.appId + '&redirect_uri=' + encodeURIComponent(Utils.host) + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect')
      } else {
        console.log()
      }
    },
    goRefund () {
      if (Utils.isWeApp()) {
        this.$router.push('/refund')
      } else {
        this.$dialog.alert({
          title: '提示',
          message: '退款申请只支持微信端用户，如有需要请联系管理员'
        }).then(() => {
        }).catch(() => {})
      }
    },
    getScan () {
      this.$store.dispatch('getScan')
    },
    /**
     * 当欠费时显示充值弹窗
     */
    showRecharge () {
      this.$dialog.alert({
        title: '未结清款项',
        message: '您现在有未结清款项，请先充值',
        closeOnPopstate: false,
        confirmButtonText: '去充值'
      }).then(() => {
        this.$router.push('/recharge')
      }).catch(() => {})
    },
    /**
     * 提示用户关注公众号
     */
    showSubscribe () {
      if (Utils.isWeApp()) {
        this.subscribeShow = true
      } else {
        this.$dialog.confirm({
          title: '获取充电提醒',
          message: '关注[' + this.publicName + ']支付宝生活号'
        }).then(() => {
          location.href = this.publicInfo
        }).catch(() => {})
      }
    },
    /**
     * 显示联系我们
     */
    showContactMessage () {
      this.$http.get('/getCallNo').then(res => {
        if (res.code === 200) {
          this.$dialog.alert({
            title: '联系电话',
            message: res.msg,
            closeOnPopstate: false,
            confirmButtonText: '关闭'
          })
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
    /**
     * 显示使用说明信息
     */
    showHelpMessage () {
      this.$http.get('/getHelpImage').then(res => {
        if (res.code === 200) {
          this.helpImgSrc = res.msg
          this.helpShow = true
        } else {
          this.$toast.fail(res.msg)
        }
      })
    },
    showChargingList () {
      this.$http.get('/getUserChargingList').then(res => {
        this.show = true
        if (res.code === 200) {
          this.chargingList = res.data
        } else {
          this.$toast.fail('获取充电记录失败！')
        }
      }).catch(() => {
        this.$toast.fail('获取充电记录失败！')
      })
    },
    goChargingPage (equipId, channelNo) {
      this.$router.push(`/charging?equipId=${equipId}&channelNo=${channelNo}`)
    }
  }
}
</script>

<style scoped lang='less'>
.top-pane {
  margin: 15px;
  padding: 15px; padding-bottom: 0;
  background: #fff;
  .base-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user {
      flex: auto;
      padding-left: 15px;
      .name {
        font-size: 16px;
        line-height: 28px;
      }
      .phone {
        font-size: 14px
      }
    }
  }
  .base-btns {
    border-top: solid 1px #eee;
    margin-top: 15px; padding: 15px 0;
    display: flex;
    justify-content: space-between;
    li {
      text-align: center;
      flex: auto;
      border-right: solid 1px #f5f5f5;
      &:last-child {
        border: none;
      }
      .value {
        margin-bottom: 5px;
        font-size: 16px;
      }
      .label {
        font-size: 12px; color: #999;
      }
    }
  }
}
.grid-box {
  margin: 15px 15px;
}
.grid-box2 {
  margin: 0px 10px; margin-top: -5px; margin-bottom: 10px;
}
.help-image {
  padding: 0 15px;
  img {
    width: 100%;
  }
}
.help-close {
  margin-top: 20px;
  padding: 0 15px;
}
</style>
